<%--
  Created by IntelliJ IDEA.
  User: 14364
  Date: 2022/12/20
  Time: 21:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style>

    .head {
        height: 80px;
        background-color: #f2f0f0;
    }
    .head .title{
        margin-left: 100px;
        font-size: 35px;
        font-family: sans-serif;
        font-weight: bold;
    }
    .navbar-nav{
        margin-left: 100px;
        width: 800px;
        /*background-color: #0a53be;*/
        display: flex;
        justify-content: space-around;
    }
    .nav-item a{
        color: #000;
        font-size: 20px;
    }
    .nav-item a:hover{
        color: #2c3034;
    }
    .active{
        background-color: #adabab;
        /*font-size: 20px;*/

        /*margin:10px 20px;*/
        padding: 0 20px;
        border-radius: 10px ;
    }
    .active a{
        color: #000;
        font-size: 22px;
    }
    .active a:hover{
        color: #2c3034;
    }
    .dropdown{
        position: absolute;
        right: 100px;
    }
</style>

<nav class="navbar navbar-expand-lg bg-body-tertiary head">
    <div class="container-fluid">
        <h1 class="navbar-brand title" href="#">宠物领养系统</h1>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="${pageContext.request.contextPath}/post_list">领养广场</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/market">宠物商品</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/my_concern">我的关注</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="${pageContext.request.contextPath}/my_fans">我的粉丝</a>
                </li>
                <li class="nav-item dropdown">
                    <img class="img-fluid" style="border-radius: 50%; height: 50px;float: left;background-color: #2c3034"
                         src="${pageContext.request.contextPath}/display?photo=${user.photo}" alt="用户头像" >
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                       aria-expanded="false" >
                        ${user.username}
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="user_mod">我的资料</a></li>
                        <li><a class="dropdown-item" href="${pageContext.request.contextPath}/logout">退出登录</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<script type="text/javascript">
    //获取路由
    function getUrl() {
        let href = window.location.href
        let substring = href;
        let index = href.indexOf('/');
        while(index != -1)
        {
            console.log("index = " + index);
            substring = substring.substring(index+1,substring.length);
            console.log("substring: " + substring);
            index = substring.indexOf('/');
        }
        return substring;
    }

    //拿到路由
    let url = getUrl();
    //设置映射关系
    const map = new Map();
    map.set("post_list",0);
    map.set("market",1);
    map.set("my_concern",2);
    map.set("my_fans",3);

    //标记当前目录
    var items = document.getElementsByClassName("nav-item");
    items[map.get(url)].className = "active";
</script>

